import { CSSProperties, FC } from 'react'
import { Graph, Node } from '@antv/x6'
import styles from './ModelAsset.module.scss'
import { useColorVar, useStyles } from '@/hooks/styles'
import { AssetCard } from '@/components/graph/assets/AssetCard/AssetCard'
import { SvgIcon } from '@/components/icons'
import { IconModel } from '@/components/icons/IconModel'
import { Port } from '@/components/graph/Port/Port'

interface IModelAsset {
  width?: CSSProperties['width']
  turnToAsset?: () => void
  node?: Node
  graph?: Graph
}

export const ModelAsset: FC<IModelAsset> = ({
  width,
  turnToAsset,
  node,
  graph,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)

  return (
    <AssetCard
      width={width}
      headerColor={c('Blue-background')}
      cardTitle={'模型'}
      cardIcon={<SvgIcon icon={IconModel} />}
      // turnToAsset={() => turnToAsset && turnToAsset()}
      node={node}
      graph={graph}
    >
      <div {...styleClass(['layout'])}>
        <div {...styleClass(['port-wrapper'])}>
          <Port circleColor={c('Blue-main')} borderColor={c('Blue-light')} />
        </div>
      </div>
    </AssetCard>
  )
}
